<template>
  <div class="wrap">
    <div>
      <a-button class="add" type="primary" @click="changeCpnState('add')"
        >{{ visible ? '返回' : '添加'}}</a-button
      >
    </div>
    <div v-if="!visible">
      <a-table
        :dataSource="dataList"
        :columns="columns"
        rowKey="id"
        :pagination="false"
      >
        <template #type="{ record }">
          <a-tag color="blue" v-for="item in record.type">{{item.title}}</a-tag>
        </template>
        <template #overview="{ record }">
          <p class="longText" :title="record.overview">{{record.overview}}</p>
        </template>
        <template #etiology="{ record }">
          <p class="longText" :title="record.etiology">{{record.etiology}}</p>
        </template>
        <template #symptoms="{ record }">
          <p class="longText" :title="record.symptoms">{{record.symptoms}}</p>
        </template>
        <template #operation="{ record }">
          <a-button type="primary" style="margin-right:10px" @click="changeCpnState('upd',record)"
            >修改</a-button
          >
          <a-button type="primary" danger @click="del(record.id)"
            >删除</a-button
          >
        </template>
      </a-table>
      <div class="page">
        <a-pagination
          v-model:current="current"
          v-model:pageSize="pageParams.limit"
          :total="total"
          show-less-items
          show-size-changer
          @showSizeChange="onShowSizeChange"
          @change="onChange"
        />
      </div>
    </div>
    <div v-else>
      <children @refreshList="refreshList" :cpnState="cpnState" :diseaseData="diseaseData"></children>
    </div>
  </div>
</template>

<script>
import {
  h,
  ref,
  toRefs,
  reactive,
  onMounted,
  computed,
  watch,
  createVNode,
} from "vue";
import utils from "@/utils/utils";
import Service from "@/api/service";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import children from './components/children.vue'
import columns from "./components/columns";

export default {
  components: {
    children
  },
  setup() {
    const state = reactive({
      dataList: [],
      columns: columns,
      current: 1,
      pageParams: {
        p: 1,
        limit: 10,
      },
      total: 1,
      visible:false,
      cpnState:'',
      diseaseData:""
    });
    onMounted(async () => {
      getDataList()
    });
    const getDataList = async () => {
      const { data:res } = await Service.getAllDisease(state.pageParams);
      console.log(res);
      res.data.forEach((item) => {
        item.created_at = utils.formatDateTime(item.created_at);
        item.type = JSON.parse(item.type)
        // let typeArr = item.type
        // for(let i = 0;i < typeArr.length;i++){
        //   item.type[i] = typeArr[i].title + ' '
        // }
      });
      state.dataList = res.data;
      state.total = res.total;
    };
    const del = async (id) => {
      Modal.confirm({
        title: () => "提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "确定删除吗?",
        okText: () => "确定",
        okType: "danger",
        cancelText: () => "取消",

        async onOk() {
          const res = await Service.delDisease({ id: id });
          if (res.code == "0") {
            message.success("删除成功");
            getDataList();
          }
        },

        onCancel() {},
      });
    };
    const changeCpnState = (type,data) => {
      console.log('changeCpnState:',type,data);
      state.cpnState = type;
      state.diseaseData = data;
      state.visible = !state.visible;
    }
    const refreshList = () => {
      state.visible = !state.visible;
      getDataList()
    }
    // 分页
    const onShowSizeChange = async (current, pageSize) => {
      state.pageParams.p = 1;
      state.pageParams.limit = pageSize;
      getDataList();
    };
    const onChange = async (pageNumber) => {
      state.pageParams.p = pageNumber;
      getDataList();
    };
    return {
      ...toRefs(state),
      del,
      onShowSizeChange,
      onChange,
      changeCpnState,
      refreshList
    };
  },
};
</script>

<style lang='less' scoped>
.wrap {
  position: relative;
}
.page {
  // position: absolute;
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
.add {
  margin: 20px 0px;
}
.longText{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;   
    white-space: nowrap;
}
</style>
